<template>
   <div class="search">
      <el-input clearable @clear="getList" style="width: 260px; margin-right: 5px" v-model="data.name" placeholder="请输入大致内容进行查询" :prefix-icon="Search"></el-input>
      <el-button type="primary" style="margin-left: 15px;" @click="getList">查 询</el-button>
    </div>
   <div class="content">
     <el-table :data="data.tableData" @selection-change="handleSelectionChange" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
      <el-table-column prop="hnyyFeedbackId" width="80" label="序号" ></el-table-column>
      <el-table-column
        prop="company"
        label="公司名称"
        width="100"
        column-key="company"
        :filters="[
          { text: '湖南公司', value: '湖南公司' },
          { text: '湖南生物公司', value: '湖南生物公司' },
          { text: '湘西公司', value: '湘西公司' },
          { text: '怀化公司', value: '怀化公司' },
          { text: '益阳公司', value: '益阳公司' },
          { text: '岳阳公司', value: '岳阳公司' },
          { text: '衡阳公司', value: '衡阳公司' },
          { text: '邵阳公司', value: '邵阳公司' }
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column prop="content" width="480" label="内容描述"></el-table-column>
      <el-table-column
        prop="module"
        label="模块"
        column-key="module"
        width="80"
        :filters="[
          { text: '质量', value: '质量' },
          { text: '采购', value: '采购' },
          { text: '销售', value: '销售' },
          { text: '物流', value: '物流' },
          { text: '财务', value: '财务' }
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column
        prop="systemName"
        label="系统名称"
        column-key="systemName"
        width="100"
        :filters="[
          { text: 'ERP', value: 'ERP' },
          { text: 'WMS', value: 'WMS' },
          { text: 'PMS', value: 'PMS' },
          { text: 'B2B', value: 'B2B' },
          { text: 'OMS', value: 'OMS' },
          { text: '其他', value: 'other' }
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column
        prop="category"
        label="分类"
        column-key="category"
        width="100"
        :filters="[
          { text: '操作指导', value: '操作指导' },
          { text: '咨询', value: '咨询' },
          { text: '后台-数据处理', value: '后台-数据处理' },
          { text: '后台-配置', value: '后台-配置' },
          { text: '打印相关', value: '打印相关' },
          { text: '系统故障', value: '系统故障' },
          { text: '岗位权限', value: '岗位权限' },
          { text: '新增需求', value: '新增需求' },
          { text: '新增小仓', value: '新增小仓' },
          { text: '数据导入', value: '数据导入' },
          { text: '数据导出', value: '数据导出' },
          { text: '不予处理', value: '不予处理' },
          { text: '其他系统处理', value: '其他系统处理' }
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column prop="subName" label="提交人名称" width="100"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="160"></el-table-column>
      <el-table-column
        prop="opFlag"
        label="状态"
        width="80"
        column-key="opFlag"
        :filters="[
          { text: '未处理', value: '未处理' },
          { text: '已处理', value: '已处理' }
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column prop="remarks" label="备注" width="180"></el-table-column>
      <el-table-column prop="url" label="图片">
        <template #default="{ row }">
          <div style="display: flex; gap: 5px; flex-wrap: wrap;">
            <el-image
              v-for="(img, index) in row.url.split(',')"
              :key="index"
              :src="img"
              :preview-src-list="row.url.split(',')"
              :preview-teleported="true"
              :hide-on-click-modal="false"
              :z-index="3000"
              fit="cover"
              style="width: 50px; height: 50px"
            />
          </div>
        </template>
      </el-table-column>


     </el-table>
   </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-size="data.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="data.total"
          :page-sizes="[5, 10, 20, 40, 80]"
          @current-change="getList"
          @size-change="getList"
      />
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import request from '@/utils/request';

const companyMap = {
  '100': '湖南公司',
  '105': '湖南生物公司',
  '110': '湘西公司',
  '115': '怀化公司',
  '120': '益阳公司',
  '125': '岳阳公司',
  '130': '衡阳公司',
  '135': '邵阳公司',
};

// 定义筛选方法
const filterHandler = (value, row, column) => {
  const property = column.property
  return row[property] === value
}



const data=reactive({
  tableData: [],
  pageNum: 1,
  pageSize: 20,
  total: 0,
  name:'', // 搜索条件
})
const getList = () => {
  request.get('/feedback/getfeedback',{
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,

    }
  }).then(res => {
    console.log('res',res)
    if (res.code === 200) {
       const processedList = res.data.list.map(item => {
        return {
          ...item,
          company: companyMap[item.company] || item.company,
          createTime: new Date(item.createTime).toLocaleString(),
          opFlag: item.opFlag === '1' ? '已处理' : '未处理',
        };
      });
      data.tableData = processedList;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.msg || '获取数据失败');
    }
  });
};
getList()
</script>
<style scoped>
.search{
  margin-bottom: 20px;
}
</style>
